<template>
	<view class="page-total">
		<view class="tab-list">
			<view class="list" v-for="(item,index) in TabBarList" @click="onTabBar(item,index)"
				:style="{marginTop: (index == 2) ?  '-35px' : '0px'}" :key="index">
				<u-badge v-if="index==3" :offset="[20,30]" :absolute="true" max="99" :value="allMsgNum"></u-badge>
				<image :src="item.acImg" mode="widthFix" v-show="tabBarShow === index"
					:style="{width: (index == 2) ?  '50px' : '25px',borderRadius: (index == 2) ?  '50%' : '0px'}">
				</image>
				<image :src="item.img" mode="widthFix" v-show="tabBarShow != index"
					:style="{width: (index == 2) ?  '50px' : '25px',borderRadius: (index == 2) ?  '50%' : '0px'}">
				</image>
				<!-- background: (index == 2) ?  'red' : '' -->
				<view v-if="index !=2" :class="{'action':tabBarShow===index}"
					:style="{marginTop: (index == 2) ?  '5px' : '0px'}">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		computed: {
			allMsgNum() {
				return this.$store.state.allMsgNum
			}
		},
		data() {
			return {
				TabBarList: [{
						index: 0,
						name: '主页',
						img: '../../../../static/images/tabbar/index.png',
						acImg: '../../../../static/images/tabbar/index_select.png'
					},
					{
						index: 1,
						name: '商城',
						img: '../../../../static/images/tabbar/strategy.png',
						acImg: '../../../../static/images/tabbar/strategy_select.png'
					},
					{
						index: 2,
						img: '../../../../static/images/tabbar/map.png',
						acImg: '../../../../static/images/tabbar/map_select.png'
					},
					{
						index: 3,
						name: '消息',
						img: '../../../../static/images/tabbar/message.png',
						acImg: '../../../../static/images/tabbar/message_select.png'
					},
					{
						index: 4,
						name: '我的',
						img: '../../../../static/images/tabbar/me.png',
						acImg: '../../../../static/images/tabbar/me_select.png'
					},
				],
				codeheight: 0,
				isOverall: 0,
				phoneModel: '',
				type: 99,
				tabBarBottom: 0
			};
		},
		props: {
			tabBarShow: {
				type: Number,
				default: 3,
			}
		},
		created() {
			this.onTabBar()
		},
		mounted() {
			try {
				const res = uni.getSystemInfoSync();
				let that = this;
				// 获取系统信息
				uni.getSystemInfo({
					success(res) {
						// console.log(res.brand) //手机牌子
						// console.log(res.model) //手机型号
						// console.log(res.screenWidth) //屏幕宽度
						// console.log(res.screenHeight) //屏幕高度
						that.codeheight = Math.round(res.screenHeight);
						that.phoneModel = res.model
						if (res.model.search('iPhone')) {
							that.isOverall = 0;
						} else if (Math.round(res.screenHeight) > 740) {
							that.isOverall = 1;
						}
						// console.log(that.isOverall);
					}
				});
			} catch (e) {
				// error
			}
		},
		methods: {
			/**
			 * @param {Object} item
			 * @param {Number} index
			 */
			onTabBar(item, index) {
				// this.tabBarShow = index;
				switch (index) {
					case 0:
						uni.switchTab({
							url: '/pages/index/index'
						})
						break;
					case 1:
						uni.switchTab({
							url: '/pages/strategy/strategy'
						})
						break;
					case 2:
						uni.switchTab({
							url: '/pages/map/map'
						})
						break;
					case 3:
						uni.switchTab({
							url: '/pages/message/message'
						})
						break;
					case 4:
						uni.switchTab({
							url: '/pages/me/index'
						})
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'cc-myTabbar.scss';
</style>